<template>
  <div class="question-review-page">
    <div class="page-header">
      <el-button @click="goBack" type="text" class="back-btn">
        <el-icon><ArrowLeft /></el-icon>
        返回错题集
      </el-button>
      <h2>题目复习</h2>
    </div>

    <div class="review-content">
      <div class="question-card">
        <div class="question-header">
          <h3>题目内容</h3>
          <el-tag type="info">{{ questionType }}</el-tag>
        </div>
        <div class="question-body">
          <p>{{ questionContent }}</p>
        </div>
        
        <div class="answer-section">
          <h4>您的答案</h4>
          <div class="user-answer">{{ userAnswer || '未作答' }}</div>
          
          <h4>正确答案</h4>
          <div class="correct-answer">{{ correctAnswer }}</div>
          
          <h4>解析</h4>
          <div class="explanation">{{ explanation || '暂无解析' }}</div>
        </div>
        
        <div class="action-buttons">
          <el-button type="primary" @click="markAsMastered">
            标记为已掌握
          </el-button>
          <el-button @click="goBack">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import { getQuestionId } from '@/api/system'

const router = useRouter()
const route = useRoute()

// 模拟题目数据
const questionContent = ref('')
const questionType = ref('')
const userAnswer = ref('')
const correctAnswer = ref('')
const explanation = ref('')

// 模拟题目数据库
const mockQuestions = {
  'q001': {
    content: '「は」和「が」的区别是什么？',
    type: '单选题',
    userAnswer: '「は」表示主语，「が」表示主题',
    correctAnswer: '「は」表示主题，「が」表示主语',
    explanation: '「は」用于提示主题，表示要谈论的话题；「が」用于表示动作的主体或状态的主体。'
  },
  'q002': {
    content: '在商务场合，如何礼貌地拒绝邀请？',
    type: '单选题',
    userAnswer: '「参加しません」',
    correctAnswer: '「申し訳ございませんが、今回は参加できません」',
    explanation: '在商务场合，应该使用敬语表达歉意，并说明无法参加的原因。'
  },
  'q003': {
    content: '听力材料中提到的会议时间是？',
    type: '单选题',
    userAnswer: '上午10点',
    correctAnswer: '下午2点',
    explanation: '听力材料中明确提到了「午後2時」这个时间。'
  },
  'q004': {
    content: '文章的主要观点是什么？',
    type: '单选题',
    userAnswer: '经济发展的必要性',
    correctAnswer: '环保意识的重要性',
    explanation: '文章通过多个例子说明了环保意识在现代社会中的重要性。'
  },
  'q005': {
    content: '以下哪些是日语的基本敬语？',
    type: '多选题',
    userAnswer: 'です、ます',
    correctAnswer: 'です、ます、ございます',
    explanation: 'です、ます、ございます是日语中最基本的敬语形式，用于表示礼貌。'
  },
  'q006': {
    content: '请填写正确的助词：私は学生___です。',
    type: '填空题',
    userAnswer: 'だ',
    correctAnswer: 'です',
    explanation: '「です」是日语中表示断定的敬语助动词，用于句末。'
  }
}
const changeSelect  = (str)=>{
  switch (str) {
    case 'A':
      return 'option_a'
    case 'B':
      return 'option_b'
    case 'C':
      return 'option_c'
    case 'D':
      return 'option_d'
    default:
      return ''
  }

}

// 根据路由参数加载题目数据
const loadQuestionData = async () => {
  const questionId = route.query.questionId || 'q001'
  const userAnswerNow = route.query.userAnswer || ''
//  const question = mockQuestions[questionId] || mockQuestions['q001']
  const res  = await getQuestionId(questionId)

  questionContent.value = res?.data?.content
  questionType.value = '单选题'
  userAnswer.value = userAnswerNow + ' ' +res?.data?.[changeSelect(userAnswerNow)]
  correctAnswer.value = res?.data?.answer + ' ' +res?.data?.[changeSelect(res?.data?.answer)]
  explanation.value = res?.data?.remark
}

onMounted(() => {
  loadQuestionData()
})

const markAsMastered = () => {
  ElMessage.success('已标记为掌握')
}

const goBack = () => {
  router.back()
}
</script>

<style scoped>
.question-review-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20px 0;
}

.page-header {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-btn {
  font-size: 1rem;
  color: #666;
}

.page-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.8rem;
}

.review-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.question-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.question-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5rem;
}

.question-body {
  margin-bottom: 30px;
}

.question-body p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #2c3e50;
}

.answer-section h4 {
  margin: 20px 0 10px 0;
  color: #2c3e50;
  font-size: 1.1rem;
}

.user-answer,
.correct-answer,
.explanation {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 20px;
  color: #2c3e50;
  line-height: 1.5;
}

.user-answer {
  color: #f56c6c;
  font-weight: 500;
}

.correct-answer {
  color: #67c23a;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
</style>
